<template>
  <el-table
    ref="multipleTable"
    :data="tableData"
    tooltip-effect="dark"
    style="width: 100%"
    @selection-change="handleSelectionChange"
  >
    <el-table-column type="selection" width="55"> </el-table-column>
    <el-table-column prop="id" label="商品编号" width="120"> </el-table-column>
    <el-table-column prop="title" label="商品名称" width="120">
    </el-table-column>
    <el-table-column prop="price" label="商品价格" show-overflow-tooltip>
    </el-table-column
    ><el-table-column prop="category" label="商品类目" show-overflow-tooltip>
    </el-table-column
    ><el-table-column prop="create_time" label="添加时间" width="200px">
    </el-table-column
    ><!--<el-table-column prop="image" label="商品卖点" show-overflow-tooltip>
    </el-table-column>-->
    <el-table-column label="商品卖点" width="180" prop="image">
      <template slot-scope="scope">
        <img :src="scope.row.image" alt="" />
      </template>
    </el-table-column>
    <el-table-column prop="descs" label="商品描述" width="120">
    </el-table-column>
    <el-table-column label="操作">
      <template slot-scope="scope">
        <el-button size="mini" @click="handleEdit(scope.$index, scope.row)"
          >编辑</el-button
        >
        <el-button
          size="mini"
          type="danger"
          @click="handleDelete(scope.$index, scope.row)"
          >删除</el-button
        >
      </template>
    </el-table-column>
  </el-table>
</template>

<script>
import { reqprojectList } from "@/api/user";
import dayjs from "dayjs";
export default {
  // eslint-disable-next-line vue/multi-word-component-names
  name: "ProductList",
  data() {
    return {
      tableData: null,
    };
  },
  components: {},
  methods: {
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    handleEdit(index, row) {
      console.log(index, row);
    },
    handleDelete(index, row) {
      console.log(index, row);
    },
    /*发起axios请求*/
    async getList() {
      const res = await reqprojectList();
      this.tableData = res.data.data;
      /*使用dayjs进行时间格式化*/
      this.tableData = this.tableData.map((item) => {
        const create_time = dayjs(item.create_time).format(
          "YYYY-MM-DD HH:mm:ss"
        );
        return { ...item, create_time };
      });
      /*对数据删除多余p标签*/
      this.tableData = this.tableData.map((item) => {
        const descs = item.descs.replace(/<[^>]+>/g, "");
        return { ...item, descs };
      });
      /*图片路径修改*/
      this.tableData = this.tableData.map((item) => {
        const descs = item.descs.replace(/<[^>]+>/g, "");
        return { ...item, descs };
      });
      console.log(this.tableData);
    },
  },
  mounted() {
    this.getList();
  },
};
</script>

<style lang="less" scoped></style>
